<template>
  <el-dialog
    :title="previewTitle"
    :visible.sync="previewVisible"
    append-to-body
    width="800px"
    :close-on-click-modal="false"
    :before-close="handlePreviewClose"
    class="preview-dialog"
  >
    <div v-loading="previewLoading" class="preview-content">
      <!-- 新增：资源切换下拉框（因返回多个资源） -->
      <div v-if="previewDataList.length > 1" class="resource-selector" style="margin-bottom: 16px;">
        <el-select
          v-model="previewDataId"
          placeholder="选择要查看的资源"
          style="width: 100%;"
          clearable
          @change="handleResourceChange"
        >
          <el-option v-for="item in previewDataList" :key="item.id" :label="item.resourceName" :value="item.id" />
        </el-select>
      </div>
      <div v-else-if="previewDataList.length === 0" style="margin-bottom: 16px; color: #999;">
        暂无多资源可选
      </div>

      <!-- 基础信息 -->
      <div class="preview-section">
        <h3 class="preview-section-title">基础信息</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="资源名称">{{ previewData?.resourceName || '无' }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ previewData?.createBy || '无' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ previewData?.createTime || '无' }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ previewData?.updateTime || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- API详情（resourceType=0） -->
      <div v-if="previewData?.resourceType === '0'" class="preview-section">
        <h3 class="preview-section-title">API详情</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="资源说明">{{ previewData.resourceSm || '无' }}</el-descriptions-item>
          <el-descriptions-item label="数据项说明">{{ previewData.resourceDataItem || '无' }}</el-descriptions-item>
          <el-descriptions-item label="入参配置">
            <div class="preview-table-section">
              <el-table
                v-if="previewInputParams.length > 0"
                :data="previewInputParams"
                border
                size="small"
                class="param-table"
              >
                <el-table-column prop="fieldName" label="字段名称" width="150" />
                <el-table-column prop="fieldComment" label="字段注解" width="150" />
                <el-table-column prop="fieldDescription" label="字段说明" />
              </el-table>
              <div v-else class="no-data-tip">暂无入参配置</div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="出参配置">
            <div class="preview-table-section">
              <el-table
                v-if="previewOutputParams.length > 0"
                :data="previewOutputParams"
                border
                size="small"
                class="param-table"
              >
                <el-table-column prop="fieldName" label="字段名称" width="150" />
                <el-table-column prop="fieldComment" label="字段注解" width="150" />
                <el-table-column prop="fieldDescription" label="字段说明" />
              </el-table>
              <div v-else class="no-data-tip">暂无出参配置</div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="API资源URL">{{ previewData.resourceApiUrl || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 文件详情（resourceType=1） -->
      <div v-if="previewData?.resourceType === '1'" class="preview-section">
        <h3 class="preview-section-title">文件详情</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="文件路径">{{ previewData.resourceFilePath || '无' }}</el-descriptions-item>
          <el-descriptions-item label="资源说明">{{ previewData.resourceSm || '无' }}</el-descriptions-item>
          <el-descriptions-item label="数据项说明">{{ previewData.resourceDataItem || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 数据库详情（resourceType=2） -->
      <div v-if="previewData?.resourceType === '2'" class="preview-section">
        <h3 class="preview-section-title">数据库详情</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="资源说明">{{ previewData.resourceSm || '无' }}</el-descriptions-item>
          <el-descriptions-item label="数据项说明">{{ previewData.resourceDataItem || '无' }}</el-descriptions-item>
          <el-descriptions-item label="数据库IP">{{ previewData.resourceDataIp || '无' }}</el-descriptions-item>
          <el-descriptions-item label="数据库类型">{{ previewData.resourceDataType || '无' }}</el-descriptions-item>
          <el-descriptions-item label="数据库端口">{{ previewData.resourceDataPort || '无' }}</el-descriptions-item>
          <el-descriptions-item label="数据库实例">{{ previewData.resourceDataName || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 新增：无资源数据提示 -->
      <div v-if="previewDataList.length === 0" class="no-resource-tip" style="text-align: center; padding: 40px;">
        暂无资源详情数据
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="previewVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      previewDataId: null,
      previewTitle: '资源详情',
      previewVisible: false,
      previewLoading: false,
      previewData: {}, // 当前选中的单个资源
      previewDataList: [], // 接口返回的资源数组
      previewInputParams: [], // API入参配置
      previewOutputParams: [] // API出参配置
    }
  },
  methods: {
    handlePreviewClose() {
      // 关闭弹窗时重置数据
      this.previewVisible = false
      this.previewData = {}
      this.previewDataList = []
      this.previewInputParams = []
      this.previewOutputParams = []
    },
    // 切换资源时重新初始化数据
    handleResourceChange(selectedResourceId) {
      // 查找选中的资源
      const selectedResource = this.previewDataList.find(
        item => item.id === selectedResourceId
      )

      if (selectedResource) {
        // 更新当前预览的资源数据
        this.previewData = { ...selectedResource }

        // 初始化API参数（如果是API类型资源）
        this.initApiParams(selectedResource)
      } else {
        // 未找到对应资源时重置数据
        this.previewData = {}
        this.previewInputParams = []
        this.previewOutputParams = []
      }
    },
    // 初始化API参数（根据实际接口返回的参数字段调整，这里假设参数存在于resourceApiParams中）
    initApiParams(resource) {
      // 重置参数
      this.previewInputParams = []
      this.previewOutputParams = []
      // 若为API类型且有参数数据（需根据实际接口字段调整，比如resource.apiInputParams）
      if (resource.resourceType === '0' && resource.resourceApiParams) {
        // 示例：假设接口返回的参数是 { input: [], output: [] } 格式
        this.previewInputParams = resource.resourceApiParams.input || []
        this.previewOutputParams = resource.resourceApiParams.output || []
      }
    }
  }
}
</script>

<style scoped>
.preview-section {
  margin-bottom: 20px;
}

.preview-section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1f2937;
}

.param-table {
  width: 100%;
  margin-top: 8px;
}

.no-data-tip {
  text-align: center;
  padding: 16px;
  color: #6b7280;
  background-color: #f9fafb;
  border-radius: 4px;
}

.no-resource-tip {
  color: #6b7280;
  font-size: 14px;
}
</style>
